<template>
	<view class="settings-container">
		<!-- 个人信息设置区域 -->
		<view class="settings-content">
			<!-- 头像设置 -->
			<view class="setting-item" >
				<view class="setting-left">
					<text class="setting-label">头像</text>
				</view>
				<view class="setting-right" @click="beforeUpload">
					<image class="avatar" :src="avatar?avatar:'/static/logo.png'" mode="aspectFill" />
					<uni-icons class="arrow-icon" type="right" size="16" color="#999" />
				</view>
			</view>

			<!-- 名称设置 -->
			<view class="setting-item" >
				<view class="setting-left">
					<text class="setting-label">名称 </text>
				</view>
				<view class="setting-right">
					<view class="setting-value">
						<input confirm-type='person' @confirm="setnickname" class="setinp" placeholder="请输入" type="text" :value="nickname" />
					</view>
					<uni-icons class="arrow-icon" type="right" size="16" color="#999" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from "common/config.js";
	import { curl } from 'common/api.js';
	export default {
		data() {
			return {
				userInfo:[],
				avatar:'',
				nickname:''
			}
		},
		onLoad() {
			var that=this;
			
			curl('user/index', {}).then((res) => {
				console.log(res.data)
				that.nickname=res.data.nickname;
				that.avatar=res.data.avatar;
			})
		},
		methods: {
			// 设置昵称
			setnickname(ret){

        curl('user/setnickname', {nickname:ret.detail.value}).then((res) => {
					console.log(res.data)
					this.nickname=res.data.nickname;

				})

			},
			
			// 上传图片
			beforeUpload(types) {
				var that=this;
				var token = uni.getStorageSync('token');
				console.log(types);
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						var ss=res.tempFilePaths;
						that.imgurl=ss[0];
						uni.uploadFile({
							url: `${baseUrl}`+'Common/uploadavatar',
							filePath: ss[0], // 本地上传完成后的路径
							name: 'file', 
							formData: {},
							header:{"token": token},
							success: function(uploadFileRes) {
								var ret=JSON.parse(uploadFileRes.data);
								console.log(ret.data)
								that.avatar=ret.data.fullurl
							}
						});
					
					}
				});
			},
					
					
					
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.setinp{
		text-align: right;
    width: 250rpx;
    //background: red;
	}
	.settings-container {
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		background-color: #ffffff;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.back-icon {
		width: 20px;
		height: 20px;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.settings-content {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.setting-item:active {
		background-color: #f5f5f5;
	}

	.setting-left {
		display: flex;
		align-items: center;
	}

	.setting-label {
		font-size: 16px;
		color: #333333;
	}

	.setting-right {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.setting-value {
		font-size: 14px;
		color: #666666;
    display: flex;align-items: center;
		margin-right: 20rpx;
	}

	.arrow-icon {
		width: 16px;
    line-height: 16px;
		height: 16px;
	}
</style>